<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-button @click="dialogFormVisible=true">添加角色</el-button>
        <span style="margin-left: 20px;">总共有{{ total }}条数据</span>
      </el-col>
    </el-row>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="角色名称">
        <template slot-scope="scope">
          <span>{{ scope.row.rolename }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态">
        <template slot-scope="{row}">
          <el-tag :type="row.deleted_at | statusFilter">
            {{ row.deleted_at?'已禁用':'正常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-setting" @click="editShow(scope.row)">权限设置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!--列表数据添加/编辑开始  -->
    <el-dialog v-if="dialogFormVisible" :title="dialogTitle" :visible.sync="dialogFormVisible" width="95%" center>
      <el-form ref="ruleForm" :model="formRow" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="formRow.rolename" auto-complete="off" />
        </el-form-item>
        <el-form-item label="角色权限">
          <div style="width:100%;height:20px;" />
          <el-row v-for="item in powers" :key="item.id">
            <el-col :span="3">
              <div style="font-weight:bold;color:#13ce66;text-align:center">{{ item.navname }}</div>
            </el-col>
            <el-col :span="21">
              <el-checkbox
                v-for="ite in item.powers"
                :key="ite.id"
                :label="ite.id"
                :checked="checkedCities.includes(ite.id)"
                @change="checkPower(ite.id)"
              >
                {{ ite.powername }}
              </el-checkbox>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->
  </div>
</template>

<script>
import { getRoles, addRole, editRole, getNavPowers, getRolePower } from '@/api/role'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { Message } from 'element-ui'

export default {
  name: 'RoleList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      if (status) {
        status = 'deleted'
      } else {
        status = 'published'
      }
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      modules: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      // 弹窗标题
      dialogTitle: '角色添加',
      dialogFormVisible: false,
      // 表单数据
      formRow: {
        rolename: '',
        powers: ''
      },
      // 权限数据
      powers: [],
      // 选中的权限
      checkedCities: []
    }
  },
  created() {
    this.getList()
    this.get_nav_powers()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true
      getRoles(this.listQuery).then(response => {
        const { data } = response
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    // 获取角色权限
    get_nav_powers() {
      getNavPowers().then(res => {
        this.powers = res.data
      })
    },

    // 权限选择操作
    checkPower(id) {
      const index = this.checkedCities.indexOf(id)
      if (index > -1) { // 已选中
        this.checkedCities.splice(index, 1)
      } else {
        this.checkedCities.splice(index, 0, id)
      }
    },
    // 表单提交方法
    submitForm(formName) {
      const isadd = this.dialogTitle !== '角色编辑'
      this.formRow.powers = this.checkedCities.join(',')
      if (isadd) { // 新增数据
        addRole(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getList()
        })
      } else { // 编辑数据
        editRole(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getList()
        })
      }
    },
    // 搜索日期变化操作方法
    dateChange(options) {
      console.log(options, 'dateChange')
    },
    // 编辑
    async editShow(row) {
      this.formRow = row
      this.dialogTitle = '角色编辑'
      const powers = await getRolePower({ roleid: row.id })
      this.checkedCities = powers.data
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
